import React from 'react'
import './css/login.css'
import logo from './img/logo.png'

const Login = (props) => {

    const login = () => {
        let url = 'https://www.304cloud.top:4321/login';
        let mana_id = document.getElementsByTagName('input')[0].value;
        let mana_password = document.getElementsByTagName('input')[1].value;
        let errmsg = document.getElementsByClassName('errmsg')[0];

        fetch(url, {
            method: 'post',
            body: JSON.stringify({ 'mana_id':mana_id, 'mana_password':mana_password })
        })
            .then(res => {
                if (!res.ok) {
                    throw new Error(`${res.status} : ${res.statusText}`)
                } else {
                    return res.json()
                }
            })
            .then(res => {
                console.log(res)
                let result = res.data
                if (result) {
                    console.log(result)
                    localStorage.setItem(mana_id, mana_password)
                    props.history.push('/')
                    props.history.replace(props.location.state)
                } else {
                    errmsg.style.display = 'inline';
                }
            }).catch(err => console.log(err))
    }
    return (
        <div className='container'>
            <div className='login'>
                <div className='welcome'>
                    <p className='p1'>WELCOME</p>
                    <p className='p2'>欢迎登陆 <span>初探星辰</span>后台管理系统</p>
                </div>
                <div className='formarea'>
                    <img className='logo' src={logo} alt='logo' />
                    <div className='inputs'>
                        <div className='userid'>
                            <div className='iconfont icon-wode'></div>
                            <input type='text' placeholder='请输入用户名' />
                        </div>
                        <div className='password'>
                            <div className='iconfont icon-mima'></div>
                            <input type='password' placeholder='请输入密码' />
                            <p className='errmsg'>用户名或密码错误！</p>
                        </div>
                        <div onClick={login} className='loginbutton'>登录</div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Login
